<template>
  <a-layout class="layout" :class="[device]">
    <global-header :isLogo="true" :mode="layoutMode" :menus="menus" :theme="navTheme" :collapsed="collapsed" :device="device" @toggle="toggle" @updateMenuTitle="handleUpdateMenuTitle">
    </global-header>
    <div class="banner" v-if="device !== 'mobile'">
      <img src="../../assets/banner@3x.png" alt="" />
    </div>
    <div class="banner-sm" v-if="device !== 'mobile'">
      <img src="../../assets/banner_sm@3x.png" alt="" />
    </div>
    <!--    <img class="banner" src="@/assets/banner@2x.png" alt="">-->
    <div class="content">
      <a-row type="flex">
        <template v-if="device === 'mobile'">
          <a-col flex="0 0 4%" />
        </template>
        <a-col flex="1" class="main">
          <div class="title-wrapper">
            <a-icon type="star" theme="filled" :style="{ fontSize: '20px', color: '#FFBA00', marginRight: '5px', marginLeft: '14px' }" />
            <div class="title">我的收藏</div>
          </div>
          <a-row type="flex" v-if="collectList.length">
            <template v-if="device === 'mobile'">
              <a-col flex="0 0 50%" v-for="menu in collectList" :key="menu.id">
                <div class="item collection">
                  <div class="dropdown-wrapper">
                    <a-dropdown placement="bottomRight">
                      <div class="menu-icon-wrapper" @click="e => e.preventDefault()">
                        <span></span>
                        <span></span>
                        <span></span>
                      </div>
                      <a-menu slot="overlay">
                        <a-menu-item>
                          <a href="javascript:;" @click="handleCollectCancel(menu.id)">取消收藏</a>
                        </a-menu-item>
                        <a-menu-item>
                          <a href="javascript:;" @click="handleIndexModalShow(menu, true)">查看介绍</a>
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown>
                  </div>
                  <div class="icon-wrapper">
                    <!-- 使用自定义icon -->
                    <Icon v-if="menu.meta.icon" :icon="menu.meta.icon" style="font-size: 22px;line-height: 60px;"></Icon>
                    <!-- <a-icon class="icon" v-if="menu.meta.icon" :type="menu.meta.icon" /> -->
                  </div>
                  <!--                  <img v-if="menu.meta.icon" :src="menu.meta.icon" class="img-icon" alt="">-->
                  <!--                  <div v-else class="icon-wrapper"></div>-->
                  <div class="name">{{ menu.meta.title }}</div>
                  <div class="desc">{{ menu.meta.label }}</div>
                  <div style="padding: 0 12px;">
                    <a-button type="primary" block style="background: #333;border-color: #333;" @click="handleIndexModalShow(menu)">点击进入</a-button>
                  </div>
                </div>
              </a-col>
            </template>
            <template v-else>
              <a-col class="col-flex" v-for="menu in collectList" :key="menu.id">
                <div class="item collection">
                  <div class="dropdown-wrapper">
                    <a-dropdown placement="bottomRight">
                      <div class="menu-icon-wrapper" @click="e => e.preventDefault()">
                        <span></span>
                        <span></span>
                        <span></span>
                      </div>
                      <a-menu slot="overlay">
                        <a-menu-item>
                          <a href="javascript:;" @click="handleCollectCancel(menu.id)">取消收藏</a>
                        </a-menu-item>
                        <a-menu-item>
                          <a href="javascript:;" @click="handleIndexModalShow(menu, true)">查看介绍</a>
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown>
                  </div>
                  <div class="icon-wrapper">
                    <!-- 使用自定义icon -->
                    <Icon v-if="menu.meta.icon" :icon="menu.meta.icon" style="font-size: 32px;line-height: 65px;"></Icon>
                    <!-- <a-icon class="icon" v-if="menu.meta.icon" :type="menu.meta.icon" /> -->
                  </div>
                  <!--                  <img v-if="menu.meta.icon" :src="menu.meta.icon" class="img-icon" alt="">-->
                  <!--                  <div v-else class="icon-wrapper"></div>-->
                  <div class="name">{{ menu.meta.title }}</div>
                  <div class="desc">{{ menu.meta.label }}</div>
                  <div class="btn-box">
                    <a-button type="primary" block style="background: #333;border-color: #333;" @click="handleIndexModalShow(menu)">点击进入</a-button>
                  </div>
                </div>
              </a-col>
            </template>
          </a-row>
          <div class="ant-empty ant-empty-normal" v-else>
            <div class="ant-empty-image">
              <svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
                <g transform="translate(0 1)" fill="none" fillRule="evenodd">
                  <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
                  <g fillRule="nonzero" stroke="#D9D9D9">
                    <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
                    <path
                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                      fill="#FAFAFA"
                    ></path>
                  </g>
                </g>
              </svg>
            </div>
            <p class="ant-empty-description">暂无数据</p>
          </div>
        </a-col>
        <template v-if="device === 'mobile'">
          <a-col flex="0 0 4%" />
        </template>
      </a-row>
    </div>
    <div class="content all-menu-content">
      <a-row type="flex">
        <template v-if="device === 'mobile'">
          <a-col flex="0 0 4%" />
        </template>
        <a-col flex="1" class="main bg">
          <div class="classi-wrapper">
            <div class="classi-item" :class="{ on: classi.key === currentClassiKey }" v-for="classi in classiList" @click="handleChangeClassi(classi.key)" :key="classi.key">
              <Icon v-if="classi.icon" :icon="classi.icon"></Icon>
              {{ classi.title }}
            </div>
          </div>
          <a-row type="flex" v-if="currentMenus.length">
            <template v-if="device === 'mobile'">
              <a-col flex="0 0 50%" v-for="menu in currentMenus" :key="menu.id">
                <!--              {{permissionMenuList}}-->
                <div class="item">
                  <div class="dropdown-wrapper">
                    <a-dropdown placement="bottomRight">
                      <div class="menu-icon-wrapper" @click="e => e.preventDefault()">
                        <span></span>
                        <span></span>
                        <span></span>
                      </div>
                      <a-menu slot="overlay">
                        <a-menu-item v-if="isCollect(menu.id)">
                          <a href="javascript:;" @click="handleCollectAdd(menu.id)">收藏</a>
                        </a-menu-item>
                        <a-menu-item>
                          <a href="javascript:;" @click="handleIndexModalShow(menu, true)">查看介绍</a>
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown>
                  </div>
                  <div class="icon-wrapper">
                    <!-- 使用自定义icon -->
                    <Icon v-if="menu.meta.icon" :icon="menu.meta.icon" style="font-size: 22px;line-height: 60px;"></Icon>
                    <!-- <a-icon class="icon" v-if="menu.meta.icon" :type="menu.meta.icon" /> -->
                  </div>
                  <!--                  <img v-if="menu.meta.icon" :src="menu.meta.icon" class="img-icon" alt="">-->
                  <!--                  <div v-else class="icon-wrapper"></div>-->
                  <div class="name">{{ menu.meta.title }}</div>
                  <div class="desc">{{ menu.meta.label }}</div>
                  <div style="padding: 0 12px;">
                    <a-button type="primary" block style="background: #333;border-color: #333;" @click="handleIndexModalShow(menu)">点击进入</a-button>
                  </div>
                </div>
              </a-col>
            </template>
            <template v-else>
              <a-col class="col-flex" v-for="menu in currentMenus" :key="menu.id">
                <!--              {{permissionMenuList}}-->
                <div class="item">
                  <div class="dropdown-wrapper">
                    <a-dropdown placement="bottomRight">
                      <div class="menu-icon-wrapper" @click="e => e.preventDefault()">
                        <span></span>
                        <span></span>
                        <span></span>
                      </div>
                      <a-menu slot="overlay">
                        <a-menu-item v-if="isCollect(menu.id)">
                          <a href="javascript:;" @click="handleCollectAdd(menu.id)">收藏</a>
                        </a-menu-item>
                        <a-menu-item>
                          <a href="javascript:;" @click="handleIndexModalShow(menu, true)">查看介绍</a>
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown>
                  </div>
                  <div class="icon-wrapper">
                    <!-- 使用自定义icon -->
                    <Icon v-if="menu.meta.icon" :icon="menu.meta.icon" style="font-size: 32px;line-height: 65px;"></Icon>
                    <!-- <a-icon class="icon" v-if="menu.meta.icon" :type="menu.meta.icon" /> -->
                  </div>
                  <!--                  <img v-if="menu.meta.icon" :src="menu.meta.icon" class="img-icon" alt="">-->
                  <!--                  <div v-else class="icon-wrapper"></div>-->
                  <div class="name">{{ menu.meta.title }}</div>
                  <div class="desc">{{ menu.meta.label }}</div>
                  <div class="btn-box">
                    <a-button type="primary" block style="background: #333;border-color: #333;" @click="handleIndexModalShow(menu)">点击进入</a-button>
                  </div>
                </div>
              </a-col>
            </template>
          </a-row>
          <div class="ant-empty ant-empty-normal" v-else>
            <div class="ant-empty-image">
              <svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
                <g transform="translate(0 1)" fill="none" fillRule="evenodd">
                  <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
                  <g fillRule="nonzero" stroke="#D9D9D9">
                    <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
                    <path
                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                      fill="#FAFAFA"
                    ></path>
                  </g>
                </g>
              </svg>
            </div>
            <p class="ant-empty-description">暂无数据</p>
          </div>
        </a-col>
        <template v-if="device === 'mobile'">
          <a-col flex="0 0 4%" />
        </template>
      </a-row>
    </div>
    <a-modal class="index-modal" centered :width="600" :visible="visible" :footer="null" :bodyStyle="{ padding: '0 24px 24px' }" @cancel="indexModalReset">
      <a-tabs :activeKey="activeKey" :tabBarStyle="{ border: 'none' }" @change="onChangeActiveKey">
        <a-tab-pane key="1" tab="系统介绍">
          <div class="text-conent" v-if="currentMenuObj.meta" v-html="currentMenuObj.meta.description || ''"></div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="新版说明">
          <div class="text-conent" style="padding: 11px 10px 20px 10px;" id="versionContainer">
            <a-table :columns="columns" :pagination="false" :data-source="data" :rowKey="record => record.id" size="small"> </a-table>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" tab="FAQ">
          <div class="text-conent" v-if="currentMenuObj.meta" v-html="currentMenuObj.meta.versionTips || ''"></div>
        </a-tab-pane>
      </a-tabs>
      <div class="msg red" v-if="showAuthMsg">您当前没有权限，请申请权限或联系管理员。</div>
      <!--      <div class="msg" v-else-if="showApplyMsg">您的申请已提交，请等待管理员审核。</div>-->
      <div class="msg" v-else></div>
      <div class="index-modal-footer">
        <a-checkbox @change="onChangeUpdate" :checked="isUpdate">
          版本更新前不再提示
        </a-checkbox>
        <div class="btn-wrapper">
          <a-button class="btn btn1" style="" :disabled="applyFlag" @click="handleApply">申请权限</a-button>
          <a-button class="btn btn2" v-if="currentMenuObj.meta && currentMenuObj.meta.secretType === 4" type="primary" @click="handleJumpPath">下载安装包</a-button>
          <a-button class="btn btn2" v-else type="primary" @click="handleJumpPath">进入系统</a-button>
        </div>
      </div>
    </a-modal>
  </a-layout>
</template>

<script>
import { queryLocationUrl, querySysCateTree, collectList, collectAdd, collectCancel, collectQuery, queryPermissionVersionList } from '@/api/box/member.js'
import { applyPermission, queryAllPermissionByToken } from '@/api/api'
import GlobalHeader from '@/components/page/GlobalHeader'
import Icon from './icon'
import { triggerWindowResizeEvent } from '@/utils/util'
import { mapActions, mapState } from 'vuex'
import { mixin, mixinDevice } from '@/utils/mixin.js'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
const columns = [
  {
    title: '版本号',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '版本内容',
    dataIndex: 'content',
    key: 'content'
  },
  {
    title: '更新日期',
    dataIndex: 'createTime',
    key: 'createTime'
  }
]
export default {
  components: {
    GlobalHeader,
    Icon
  },
  mixins: [mixin, mixinDevice],
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      totalPage: 0,
      columns,
      data: [],
      updateFlag: false,
      currentClassiKey: null,
      collectList: [],
      applyFlag: false,
      activeKey: '1',
      currentMenuObj: {},
      showAuthMsg: false,
      showApplyMsg: false,
      isUpdate: false,
      visible: false,
      collapsed: false,
      activeMenu: {},
      menus: [],
      currentMenus: [],
      userInfo: Vue.ls.get(USER_INFO)
    }
  },
  computed: {
    ...mapState({
      // 主路由
      mainRouters: state => state.permission.addRouters,
      // 后台菜单
      permissionMenuList: state => state.user.permissionList.filter(e => !e.hidden),
      // 授权后台菜单
      authPermissionMenuList: state => state.user.authPermissionList
    }),
    classiList() {
      const classiList = this.$store.state.user.classiList
      const key = classiList.length ? classiList[0].key : null
      this.handleChangeClassi(key)
      return classiList
    },
    isCollect() {
      const ids = this.collectList.map(e => e.id)
      return id => {
        return !ids.includes(id)
      }
    }
  },
  watch: {
    sidebarOpened(val) {
      this.collapsed = !val
    }
  },
  created() {
    this.menus = this.permissionMenuList
    this.collapsed = !this.sidebarOpened
    // this.getSysCateTree()
    this.getCollectList()
  },
  mounted() {
    gio('setUserId', this.userInfo.phone) // 设置用户登陆ID
    gio('identify', this.userInfo.phone)
  },
  beforeDestroy() {},
  methods: {
    // 添加收藏
    handleCollectAdd(id) {
      collectAdd({ sysPermissionId: id })
        .then(res => {
          const { code, result, message } = res
          if (code == 200) {
            this.getCollectList()
          } else {
            this.$message.error(message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    // 取消收藏
    handleCollectCancel(id) {
      collectCancel({ sysPermissionId: id, type: 1 })
        .then(res => {
          const { code, result, message } = res
          if (code == 0) {
            this.getCollectList()
          } else {
            this.$message.error(message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    // 分类列表
    getSysCateTree() {
      querySysCateTree('B07')
        .then(res => {
          const { code, result, message } = res
          if (code == 0) {
            this.classiList = result
            const key = this.classiList.length ? this.classiList[0].key : null
            this.handleChangeClassi(key)
          } else {
            this.$message.error(message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    // 收藏列表
    getCollectList() {
      collectList({ type: 1 })
        .then(res => {
          const { code, result, message } = res
          if (code == 0) {
            const ids = result.records.map(e => e.sysPermissionId)
            this.collectList = this.menus.filter(e => ids.includes(e.id))
          } else {
            this.$message.error(message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    handleChangeClassi(key) {
      if (!key) return
      this.currentClassiKey = key
      this.currentMenus = this.menus.filter(e => key == e.meta.sysCategoryId)
    },

    // 申请权限
    handleApply() {
      this.applyFlag = true
      const data = {
        id: this.currentMenuObj.id
      }
      applyPermission(data)
        .then(res => {
          this.applyFlag = false
          if (res.code === 200) {
            window.open(res.result, '_blank')
            // this.showAuthMsg = false
            // this.showApplyMsg = true
            // this.applyFlag = false
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch(err => {
          this.applyFlag = false
        })
    },

    onChangeActiveKey(e) {
      this.activeKey = e
      if (e == 2) {
        this.handleScroll()
      }
    },

    onChangeUpdate(e) {
      if (this.updateFlag) return
      this.updateFlag = true
      const collectAlert = e.target.checked ? collectCancel : collectAdd
      const data = {
        sysPermissionId: this.currentMenuObj.id,
        type: 2
      }
      collectAlert(data)
        .then(res => {
          this.updateFlag = false
          if (res.code === 0 || res.code === 200) {
            this.isUpdate = e.target.checked
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch(err => {
          this.updateFlag = false
        })
    },

    // 显示进入链接/路由弹窗isIntroduce:查看介绍入口
    async handleIndexModalShow(menu, isIntroduce) {
      console.log(menu)
      this.currentMenuObj = menu
      this.pageNo = 1
      this.totalPage = 0
      this.data = []
      this.getQueryPermissionVersionList()
      try {
        await this.getCollectQuery()
      } catch (e) {
        console.log(e)
      }
      if (isIntroduce) {
        this.visible = true
        return
      }
      if (this.isUpdate) {
        this.handleJumpPath()
      } else {
        this.visible = true
      }
    },

    // 获取当前版本更新前不再提示状态
    getCollectQuery() {
      return new Promise((resolve, reject) => {
        const data = {
          sysPermissionId: this.currentMenuObj.id,
          type: 2
        }
        collectQuery(data)
          .then(res => {
            if (res.code === 200) {
              this.isUpdate = !res.result
              resolve()
            } else {
              reject()
              this.$message.error(res.data.msg)
            }
          })
          .catch(err => {
            reject()
          })
      })
    },

    // 查询菜单版本记录
    getQueryPermissionVersionList() {
      const data = {
        sysPermissionId: this.currentMenuObj.id,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      queryPermissionVersionList(data).then(res => {
        const { records, pages, total } = res.result
        if (res.code === 0) {
          this.data = this.data.concat(records)
          this.totalPage = pages
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },

    // 上拉加载分页查询菜单版本记录
    handleScroll() {
      this.$nextTick(() => {
        const el = document.getElementById('versionContainer')
        if (!el) return
        const offsetHeight = el.offsetHeight
        el.onscroll = () => {
          const scrollTop = el.scrollTop
          const scrollHeight = el.scrollHeight
          if (offsetHeight + scrollTop - scrollHeight >= -1) {
            console.log('scroll')
            this.pageNo = this.pageNo + 1
            if (this.pageNo > this.totalPage) {
              return
            } else {
              this.getQueryPermissionVersionList()
            }
          }
        }
      })
    },

    // 重置进入链接/路由弹窗
    indexModalReset() {
      this.showAuthMsg = false
      this.showApplyMsg = false
      this.applyFlag = false
      this.visible = false
      this.currentMenuObj = {}
      this.activeKey = '1'
    },

    // 跳转的链接/路由
    handleJumpPath() {
      console.log(this.currentMenuObj)
      let menu = this.currentMenuObj
      if (!menu.meta.isEnter) {
        this.showAuthMsg = true
        return
      }
      if (menu.meta.internalOrExternal) {
        this.indexModalReset()
        setTimeout(() => {
          // 打开外部连接
          this.getQueryLocationUrl(menu.id)
        }, 500)
      }
      if (!menu.children || !menu.children.length) return

      console.log(this.authPermissionMenuList)
      let permissionMenu = this.authPermissionMenuList.filter(e => e.id == menu.id)
      console.log(permissionMenu)
      let currentMenu = this.findChildPath(permissionMenu[0])
      console.log(currentMenu, 'currentMenu')
      if (currentMenu.path !== this.$route.fullPath) {
        console.log(currentMenu.path, 'path*********')
        if (currentMenu.meta.internalOrExternal) {
          this.indexModalReset()
          setTimeout(() => {
            // 打开外部连接
            this.getQueryLocationUrl(currentMenu.id)
          }, 500)
          // window.open(currentMenu.component, '_blank')
        } else {
          this.$router.push(currentMenu.path)
          this.$store.commit('SET_CURRENT_FIRST', menu.path)
        }
      }
      this.indexModalReset()
    },

    //获取外部链接/安装包链接
    getQueryLocationUrl(id) {
      const data = {
        id
      }
      queryLocationUrl(data).then(res => {
        if (res.code === 0) {
          window.open(res.result, '_blank')
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    ...mapActions(['setSidebar']),
    toggle() {
      this.collapsed = !this.collapsed
      this.setSidebar(!this.collapsed)
      triggerWindowResizeEvent()
    },
    menuSelect() {
      if (!this.isDesktop()) {
        this.collapsed = false
      }
    },

    findMenuBykey(menus, key) {
      for (let i of menus) {
        if (i.path == key) {
          this.activeMenu = { ...i }
        } else if (i.children && i.children.length > 0) {
          this.findMenuBykey(i.children, key)
        }
      }
    },

    // 查找菜单第一项
    findChildPath(menu) {
      let currentMenu = menu
      if (menu.children && menu.children.length) {
        currentMenu = this.findChildPath(menu.children.filter(e => !e.hidden)[0] || menu.children[0])
      } else {
        currentMenu = menu
      }
      return currentMenu
    },

    //update-end-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title

    // update-begin-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
    handleUpdateMenuTitle(value) {
      this.findMenuBykey(this.menus, value.path)
      this.activeMenu.meta.title = value.meta.title
      this.$emit('dynamicRouterShow', value.path, this.activeMenu.meta.title)
    }
    // update-end-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
  }
}
</script>
<style lang="less" scoped>
.text-conent /deep/ .ant-table-wrapper {
  background: #fff;
}
.text-conent /deep/ .ant-table-placeholder {
  background: none;
  border: none;
}
.index-modal /deep/ .ant-tabs-nav .ant-tabs-tab-active {
  color: #000000;
}
.index-modal /deep/ .ant-tabs-ink-bar {
  background-color: #000000;
}
.index-modal /deep/ .ant-tabs-nav .ant-tabs-tab:hover {
  color: #000000;
}
.index-modal-footer {
  display: flex;
  justify-content: space-between;
}
/deep/.ant-checkbox-checked::after {
  border-color: #000000;
}
.ant-checkbox-wrapper /deep/.ant-checkbox-inner {
  border-color: #000000;
}
/deep/.ant-checkbox-inner::after {
  outline: #000000;
}
/deep/.ant-checkbox-checked .ant-checkbox-inner {
  background-color: #000000;
  border-color: #000000;
}
.ant-checkbox-wrapper:hover /deep/.ant-checkbox-inner {
  border-color: #000000;
}
.msg {
  height: 24px;
  line-height: 24px;
  text-align: right;
  font-size: 12px;
  color: #1375f2;
  &.red {
    color: #ff3030;
  }
}
.btn-wrapper {
  .btn {
    padding: 0;
    width: 96px;
    font-size: 12px;
    &.btn1 {
      border-color: #000000;
      color: #000000;
    }
    &.btn2 {
      margin-left: 24px;
      background: #000000;
      border-color: #000000;
      color: #fff;
    }
  }
}
@max-width: 1392px;
.content {
  margin: 0 auto;
  width: 100%;
}
.layout {
  background: #fff;
}
.item {
  position: relative;
  padding: 18px 12px 18px;
  margin: 14px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 12px;
  &.collection {
    background: #f3f4f7;
  }
  .icon-wrapper {
    margin: 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 7px;
    text-align: center;
    background: #e9ecef;
    .icon {
      line-height: 65px;
      font-size: 32px;
    }
  }
  .img-icon {
    display: block;
    margin: 0 auto;
    width: 60px;
    height: 60px;
  }
  .name {
    padding: 0 12px;
    margin-top: 12px;
    line-height: 22px;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    color: #000000;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    word-break: break-all; /* 追加这一行代码 */
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
  }
  .desc {
    padding: 0 12px;
    margin: 4px 0 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    word-break: break-all; /* 追加这一行代码 */
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    text-align: center;
    color: #a8a8a8;
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
  }
}
.item:hover {
  .dropdown-wrapper {
    opacity: 1;
    transition: opacity 0.5s;
  }
}
/deep/.trigger.anticon.anticon-menu-fold {
  margin-left: -45px;
  visibility: hidden;
}
.banner {
  margin-top: -59px;
  display: block;
  width: 100%;
  height: 334px;
  // background: url("../../assets/banner@2x.png") no-repeat center center;
  // background-size: 100% 100%;
  // background: #000;
  img {
    display: block;
    margin: 0 auto;
    width: 1392px;
  }
}
.title-wrapper {
  display: flex;
  align-items: center;
  padding: 40px 0 0;
  .title {
    line-height: 25px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
}
.layout /deep/.header {
  background: rgba(0, 0, 0, 0) !important;
  margin: 0 auto;
  max-width: @max-width;
}
/deep/.ant-layout-header {
  background: rgba(0, 0, 0, 0) !important;
}
.layout .header.dark,
.header.light {
  background: rgba(0, 0, 0, 0) !important;
}
.main {
  max-width: @max-width;
  margin: 0 auto;
}
.layout /deep/.header.dark {
  background: transparent !important;
  box-shadow: none;
  // background: #000;
}
.layout.mobile /deep/.header {
  background: rgba(0, 0, 0, 0.1) !important;
}
.layout /deep/.header.dark .user-wrapper .action,
.layout /deep/.top-nav-header-index.dark .user-wrapper .action {
  // color: #fff;
  color: #01091c;
}
.layout /deep/.header .user-wrapper {
  // background: rgba(205, 205, 205, 0.26);
  // border-radius: 25px;
  // height: 50px;
  // margin-top: 25px;
}
.text-conent {
  padding: 11px 10px 20px 16px;
  height: 240px;
  overflow: hidden;
  overflow-y: auto;
  line-height: 20px;
  font-size: 14px;
  color: #000000;
  background-color: #f3f5f6;
}
.bg {
  padding: 0 6px 6px;
  min-height: 325px;
  margin-bottom: 20px;
  background-color: #f3f4f7;
  border-radius: 16px;
}
.dropdown-wrapper {
  opacity: 0;
  position: absolute;
  right: 12px;
  top: 12px;
  cursor: pointer;
  .menu-icon-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #e9ecef;
    span {
      margin: 1px 0;
      width: 3px;
      height: 3px;
      background: #333333;
      border-radius: 50%;
    }
  }
}
.classi-wrapper {
  display: flex;
  padding: 24px 0 16px;
  .classi-item {
    position: relative;
    padding: 6px 0;
    margin: 0 24px;
    line-height: 25px;
    font-size: 16px;
    color: #666;
    cursor: pointer;
    &.on {
      color: #000000;
    }
    &.on:after {
      content: ' ';
      position: absolute;
      left: 6px;
      right: 6px;
      bottom: 0;
      border-bottom: 2px solid #000000;
    }
  }
}
.banner-sm {
  margin-top: -59px;
  display: block;
  width: 100%;
  height: 228px;
  display: none;
  img {
    display: block;
    margin: 0 auto;
    width: 1100px;
  }
}
.btn-box {
  padding: 0 12px;
}
.all-menu-content {
  margin-top: 46px;
}
.col-flex {
  flex: 0 0 calc(100% / 6);
}
@media screen and (max-width: 1500px) {
  @max-width: 1100px;
  .layout /deep/.header {
    max-width: @max-width;
  }
  .banner {
    display: none;
  }
  .banner-sm {
    display: block;
  }
  .main {
    max-width: @max-width;
  }
  .item {
    padding: 16px 12px;
    .icon-wrapper {
      width: 54px;
      height: 54px;
      border-radius: 6px;
      .icon {
        line-height: 60px;
        font-size: 22px;
      }
    }
    .name {
      font-size: 14px;
    }
    .desc {
      font-size: 12px;
      line-height: 17px;
      margin: 4px 0 16px;
    }
  }
  .btn-box {
    padding: 0 10px;
  }
  .all-menu-content {
    margin-top: 26px;
  }
  .btn-box {
    button {
      font-size: 12px;
    }
  }
  .col-flex {
    flex: 0 0 calc(100% / 5);
  }
  .bg {
    min-height: 307px;
  }
}
</style>

